<div>
  <div class="nav">
    <label>热门图文</label>
  </div>
  <div *ngIf="!loading">
    <div class="flex wrap">
      <div class="topo" *ngFor="let item of data.list" [title]="item.desc" (click)="onOpen(item)">
        <div class="image">
          <img [src]="item.image" />
        </div>
        <div class="ph15 pv10">
          <div class="title line one" [title]="item.name">{{ item.name }}</div>
          <div class="desc line two mt5" [title]="item.desc">{{ item.desc }}</div>
          <div class="flex mt5">
            <div class="full">
              <ui-avatar [letters]="item.usernamePinyin" [img]="item.avatarUrl" [colors]="['#1890ff']"></ui-avatar>
              {{ item.username }}
            </div>
            <div>
              <span class="hover pointer mr15" title="赞" (click)="onStar($event, item)">
                <i
                  class="iconfont "
                  [class.icon-appreciate]="!item.stared"
                  [class.icon-appreciatefill]="item.stared"
                ></i>
                <span class="ml5">{{ item.star || 0 }}</span>
              </span>
              <span class="hover pointer" title="收藏" (click)="onFavorite($event, item)">
                <i class="iconfont" [class.icon-like]="!item.favorited" [class.icon-likefill]="item.favorited"></i>
                <span class="ml5">{{ item.hot || 0 }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="p10 mb30" *ngIf="data.count">
      <ui-pagination
        [(pageIndex)]="search.pageIndex"
        [(pageCount)]="search.pageCount"
        [pageTotal]="data.count"
        [options]="{ pageCount: false }"
      ></ui-pagination>
    </div>
  </div>

  <ui-loading
    *ngIf="loading"
    class="mt50"
    tip="正在加载，请稍等（个人云服务器资源小，人多可能慢，欢迎资助）..."
  ></ui-loading>
</div>
